<template>
  <div class="app-container">
    <div ref="echartsContainer" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const echartsContainer = ref(null);

    const responseData = {
      "code": 200000,
      "msg": "success",
      "data": {
        "POC": [
          [
            "1661961600000",
            56,
            "中集1，财司"
          ],
          [
            "1664553600000",
            23,
            "中集2，财司"
          ],
          [
            "1667232000000",
            45,
            "中集3，财司"
          ],
          [
            "1669824000000",
            67,
            "中集4，财司"
          ]
        ],
        "生产环境": [
          [
            "1661961600000",
            98,
            "中集11，财司"
          ],
          [
            "1664553600000",
            13,
            "中集22，财司"
          ],
          [
            "1667232000000",
            12,
            "中集33，财司"
          ],
          [
            "1669824000000",
            88,
            "中集44，财司"
          ]
        ]
      },
      "originCode": 0,
      "statusOk": true,
      "httpCode": 200
    }

    onMounted(() => {
      const myChart = echarts.init(echartsContainer.value);

      const seriesData = Object.keys(responseData.data).map(key => {
        return {
          name: key,
          type: 'line',
          data: responseData.data[key].map(item => [parseInt(item[0]), item[1]]),
        };
      });

      // 明确指定横轴刻度
      const xAxisData = responseData.data["POC"].map(item => new Date(parseInt(item[0])));


      const option = {
        xAxis: {
          type: 'time',
          data: xAxisData, // 指定刻度数据
          minInterval: 1000 * 60 * 60 * 24 * 30,
          axisLabel: {
            showMinLabel: true,
            showMaxLabel: true,
            rotate: 20,
            padding: [20,-20,0,0],
            formatter: function (value) {
              const date = new Date(value);
              const year = date.getFullYear();
              const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 补零
              return `${year}-${month}`;
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: seriesData,
        tooltip: {
          trigger: "axis",
        },
        // tooltip: {
        //   trigger: 'axis', // 触发类型，鼠标移动到轴线上触发
        //   formatter: function (params) {
        //     const date = new Date(params[0].value[0]);
        //     const year = date.getFullYear();
        //     const month = (date.getMonth() + 1).toString().padStart(2, '0');
        //     const monthText = `${year}-${month}`;
        //
        //     // 创建一个<ul>标签来容纳列表项
        //     let tooltipContent = `<ul style="list-style-type: none; padding: 0; margin: 0;">`;
        //
        //     // 遍历系列数据，为每个系列创建一个<li>标签，设置颜色和数值
        //     params.forEach(param => {
        //       const color = param.color;
        //       const seriesName = param.seriesName;
        //       const value = param.value[1];
        //
        //       // 使用<span>标签设置颜色
        //       const colorSpan = `<span style="color: ${color};">●</span>`;
        //
        //       // 创建列表项
        //       const listItem = `<li>${colorSpan} ${seriesName}: ${value}</li>`;
        //
        //       // 添加到tooltip内容中
        //       tooltipContent += listItem;
        //     });
        //
        //     // 关闭<ul>标签
        //     tooltipContent += `</ul>`;
        //
        //     return monthText + '<br>' + tooltipContent;
        //   },
        // },
        legend: {
          show: true
        },
      };

      myChart.setOption(option);
    });

    return {
      echartsContainer,
    };
  },
};
</script>

<style>
/* 可选的样式 */
</style>
